<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js " type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		/* 气泡框相关 */
		.triangle-isosceles {
		position:relative;
		padding:15px;
		margin:1em 0 3em;
		color:#000;
		background:#f3961c;
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
		background:-moz-linear-gradient(#f9d835, #f3961c);
		background:-o-linear-gradient(#f9d835, #f3961c);
		background:linear-gradient(#f9d835, #f3961c);
		filter:progid:DXImageTransform.Microsoft.gradient(GradinetType=0, startColorstr="#f9d835", endColorstr="#f3961c");
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
		}
		.triangle-isosceles.top {
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
		background:-moz-linear-gradient(#f3961c, #f9d835);
		background:-o-linear-gradient(#f3961c, #f9d835);
		background:linear-gradient(#f3961c, #f9d835);
		filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f3961c", endColorstr="#f9d835");
		}
		.triangle-isosceles.left {
		margin-left:50px;
		background:#f3961c;
		}
		.triangle-isosceles.right {
		margin-right:50px;
		background:#f3961c;
		}
		.triangle-isosceles:after {
		content:"";
		position:absolute;
		left:50px;
		bottom:-15px;
		border-width:15px 15px 0;
		border-style:solid;
		border-color:#f3961c transparent;
		display:block;
		width:0;
		}
		.triangle-isosceles.top:after {
		top:-15px;
		bottom:auto;
		left:auto;
		right:50px;
		border-width:0 15px 15px;
		border-color:#f3961c transparent;
		}
		.triangle-isosceles.left:after {
		top:16px;
		left:-50px;
		bottom:auto;
		border-width:10px 50px 10px 0;
		border-color:transparent #f3961c;
		}
		.triangle-isosceles.right:after {
		top:16px;
		right:-50px;
		bottom:auto;
		border-width:10px 0 10px 50px;
		border-color:transparent #f39a1c;
		left:auto;
		}
		.triangle-right {
		position:relative;
		padding:15px;
		margin:1em 0 3em;
		color:#fff;
		background:#075698;
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
		background:-moz-linear-gradient(#2e88c4, #075698);
		background:-o-linear-gradient(#2e88c4, #075698);
		background:-ms-linear-gradient(#2e88c4, #075698);
		filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#2e88c4", endColorstr="#075698");
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
		}
		.triangle-right.top {
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
		background:-moz-linear-gradient(#075698, #2e88c4);
		background:-o-linear-gradient(#075698, #2e88c4);
		background:linear-gradient(#075698, #2e88c4);
		filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#075698", endColorstr="#2e88c4");
		}
		.triangle-right.left {
		margin-left:40px;
		background:#075698;
		}
		.triangle-right.right {
		margin-right:40px;
		background:#075698;
		}
		.triangle-right:after {
		content:"";
		position:absolute;
		bottom:-20px;
		left:50px;
		border-width:20px 0 0 20px;
		border-style:solid;
		border-color:#075698 transparent;
		display:block;
		width:0;
		height:0;
		}
		.triangle-right.left:after {
		top:16px;
		left:-40px;
		bottom:auto;
		border-width:15px 40px 0 0;
		border-color:transparent #075698;
		}
		.triangle-right.top:after {
		top:-20px;
		right:50px;
		bottom:auto;
		left:auto;
		right:50px;
		border-width:20px 20px 0 0;
		border-color:transparent #075698;
		}
		.triangle-right.right:after {
		top:16px;
		right:-40px;
		bottom:auto;
		left:auto;
		border-width:15px 0 0px 40px;
		border-color:transparent #075698;
		}
		
		#app{
			width: 78%;
			margin: 0 auto;
			border: 1px solid #F5F5F5;
			margin-top: 45px;
		}
		#chat-container{
			width: 78%;
			margin: 0 auto;
			border: 1px solid #F5F5F5;
		}
		
		#chat-container>.main{
			width: 78%;
			margin: 0 auto;
			border: 1px solid #000000;
		}
		
		ul li{
			list-style-type:none;
		}
		
		
	</style>
	<body>
		<div id="app">
			<div id="chat-container">
				<div class="main" style="padding: 10px; padding-left: 0;">
					<div style="text-align: center;magin"><span>当前聊天对象:{{heUser.nickname}}</span></div>
					<el-row>
						<el-avatar :size="75" style="float: left;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
						<p class="triangle-right left" style="float: left;">消息1</p>
					</el-row>

					<el-row>
						<el-avatar style="float: right;" :size="75" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
						<p class="triangle-right right" style="float: right;">消息2</p>
					</el-row>

					<el-row v-for="(message,index) in messages" v-if="index > messages.length-5">
						<div v-text="message.messageTime" style="text-align: center;"></div>
						<el-avatar :style="message.writeId==iUser.userId?'float: right;':'float: left;'" :size="75" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
						<p :class="message.writeId==iUser.userId?'triangle-right right':'triangle-right left'" :style="message.writeId==iUser.userId?'float: right;':'float: left;'">{{message.messageContent}}</p>
					</el-row>
					<div style="width: 78%; margin: 0 auto;">
						<el-row>
							<el-col :span="18">
								<el-input type="textarea" :rows="2" v-model="fsParam.messageContent" placeholder="请输入内容">
								</el-input>
							</el-col>
							<el-col :span="4" :offset="1">
								<el-button type="primary" @click="fs()">发送</el-button>
							</el-col>

						</el-row>
					</div>

				</div>
			</div>

			<div>
				<input type="text" v-model="test.onId" placeholder="设置发送人id(自己)" />
				<input type="text" v-model="test.toId" placeholder="设置接收人id" />
				<input type="button" @click="sz()" value="确定" />
				<input type="button" value="打开链接" @click="lj()" />
			</div>

		</div>
		<script type="text/javascript">
            var zullstr="http://192.168.10.58:11000/user-coach/"
			// 获取传过来的参数
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return unescape(r[2]);
				return null; //返回参数值
			}

			function lj() {
				var socket;
				if (typeof(WebSocket) == "undefined") {
					console.log("您的浏览器不支持websocket");
				} else {
					console.log("您的浏览器支持websocket");
					//实例化websocket对象
					socket = new WebSocket("ws://localhost:8000/websocket/" + 1);

					// 打开事件
					socket.onopen = function() {
						console.log("已经打开socket");
					}
					// 获得消息事件
					socket.onmessage = function(msg) {

						console.log(msg);
						// app.lts.push(msg.messageTime);
					}

					// 关闭事件
					socket.onclose = function() {
						console.log("Socket已关闭");
					}

					// 发生错误事假
					socket.onerror = function() {
						alert("Socket发生了错误");
					}
				}
			}
			var app = new Vue({
				el: "#app",
				data: {
					messages: [{
						writeId: 1,
						readId: 3,
						isOneself: false,
						messageContent: "傻吊吧2222",
						messageTime: '20123',

					}, ],
					heUser: {
						userId: 3,
						nickname: '',
					},
					iUser: {
						userId: 1,
						nickname: '',
					},

					// 发送消息参数
					fsParam: {
						writeId: 1,
						readId: 2,
						messageContent: '',
					},
					test: {
						toId: 2,
						onId: 1,
					}
				},
				created: function() {
					// this.getMessagesById();
					// this.getHeUser();
				},
				methods: {
					// 获取聊天对象的基本信息
					getHeUser: function() {

						// 获取传过来的聊天对象id
						// var heUserid = getUrlParam("userId");
						var heUserid = this.test.toId;

						var _this = this;
						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url:zullstr+ "http://localhost:8000/webSocketController/getUserInfoById",
							type: "get",
							data: {
								"userId": heUserid
							},
							dataType: "json",
							header: {
								'Content-type': 'application/x-www-form-urlencoded'
							},
							success(data) {
								console.log(data);
								if (data.code == 200) {
									console.log("查询成功");
									_this.heUser = data.data;
								} else {
									console.log("查询失败");
								}
							},
							error(data) {
								_this.viewMsg("error", "服务器繁忙!")
							}
						});
					},
					// 获取消息
					getMessagesById: function() {

						var _this = this;
						var userId = this.test.onId;

						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url:zullstr+ "http://localhost:8000/webSocketController/getMessagesById",
							type: "get",
							data: {
								"userId": 1
							},
							dataType: "json",
							header: {
								'Content-type': 'application/x-www-form-urlencoded'
							},
							success(data) {
								console.log(data);
								if (data.code == 200) {
									console.log("查询成功");
									_this.messages = data.data;
								} else {
									console.log("查询失败");
								}
							},
							error(data) {
								_this.viewMsg("error", "服务器繁忙!")
							}
						});
					},

					// 发送消息
					fs: function() {
						var _this = this;
						if (_this.fsParam.messageContent == '') {
							_this.viewMsg("info", "内容不能为空!");
						}
						$.ajax({ beforeSend: function (request) {
                                request.setRequestHeader("auth_token", $.cookie("auth_token"));},
							url:zullstr+ "http://localhost:8000/webSocketController/fs",
							type: "get",
							data: _this.fsParam,
							dataType: "json",
							header: {
								'Content-type': 'application/x-www-form-urlencoded'
							},
							success(data) {
								console.log(data);
								if (data.code == 200) {
									console.log("发送成功");
									var message = {
										writeId: _this.test.onId,
										readId: _this.test.toId,
										messageContent: _this.fsParam.messageContent,
										messageTime: new Date(),
									};
									_this.messages.push(message);
								} else {
									console.log("发送失败");
								}
							},
							error(data) {
								_this.viewMsg("error", "服务器繁忙!")
							}
						});
					},
					// 封装的消息提示  success warning info  error
					viewMsg: function(type, message) {
						this.$message({
							type: type,
							message: message
						});
					},
					// 建立链接
					lj: function() {
						var _this = this;
						var socket;
						if (typeof(WebSocket) == "undefined") {
							console.log("您的浏览器不支持websocket");
						} else {
							console.log("您的浏览器支持websocket");
							//实例化websocket对象
							socket = new WebSocket("ws://localhost:8000/websocket/" + _this.test.onId);

							// 打开事件
							socket.onopen = function() {
								console.log("已经打开socket");
							}
							// 获得消息事件
							socket.onmessage = function(msg) {
								console.log("获取到消息");
								console.log(msg);
								var data = msg.data;
								if(data == '连接成功'){
									return;
								}
								
								var message = JSON.parse(data);
								if (message != null) {
									var messageTime = message.messageTime;
									// { "date": { "year": 2020, "month": 7, "day": 16 }, "time": { "hour": 20, "minute": 45, "second": 30, "nano": 881000000 } }
									
									var date = messageTime.date;
									var time = messageTime.time;
									var strTime = date.year +"-" + date.month + "-" + date.day + " " +time.hour + ":" + time.minute + ":" + time.second ;
									message.messageTime = strTime;
									_this.messages.push(message);
									
									
								}

								// app.lts.push(msg.messageTime);
							}

							// 关闭事件
							socket.onclose = function() {
								console.log("Socket已关闭");
							}

							// 发生错误事假
							socket.onerror = function() {
								alert("Socket发生了错误");
							}
						}
					},
					sz: function() {
						this.fsParam.readId = this.test.toId;
						this.fsParam.writeId = this.test.onId;
						
						this.iUser.userId = this.test.onId;
						this.heUser.userId = this.test.toId;
						this.getMessagesById();
						this.getHeUser();
					}


				},
				mounted: function() {


				},
				watch: {

				}
			});
		</script>
	</body>
</html>
